<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>棒棒糖</title>
		<style>
			.d1{
				width:500px;
				height:500px;
				/* 背景色 */
				background-color:#aaffff;
				/* 画圆：1.空间宽高2.边框/背景颜色填充3.倒角 */
				border-radius:50%;
				
			}
			.d2{
				width:350px;
				height:350px;
				/* 背景色 */
				background-color:#aaaaff;
				border-radius:50%;
				/* 相对定位 默认按照父级*/
				position:relative;
				left:75px;
				top:75px;
				
			}
			.d3{
				width:200px;
				height:200px;
				/* 背景色 */
				background-color:#ffff7f;
				border-radius:50%;
				position:relative;
				left:75px;
				top:75px;
				} 
				.d4{
					width:200px;
					height:200px;
					border-top:10px solid red;
					border-right:10px solid red;
					border-radius:50%;
					transform:rotate(138deg);
				}
				p{
					width:20px;
					height:300px;
					background-color:#55ff7f ;
					position:relative;
					left: 500px;
					top: -120px;
					transform: rotate(-45deg);

									
				}
				
				
		</style>
	</head>
	<body>
		<div class="d4"></div>
		<!-- 思路：html 4个元素  
		 类选择器：起别名方式抓取页面元素
		 1.任何元素通用属性 class="别名"
		 2.【css】.别名方式作为选择器
		 -->
		<div class="d1">
			<div class="d2">
				<div class="d3"></div>
			</div>
		</div>
		<p></p>
	</body>
</html>